<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Slider Bar</title>
	<style type="text/css">
		body
			{
			margin:50px;
			font-family:Helvetica, Arial, sans-serif;;
			}
	
		
		div.slider
			{
			}

		
		div.slider.clock
			{
			width:200px;
			height:200px;
			}
		div.slider.clock div.pannel
			{
			position:absolute;
			width:200px;
			height:200px;
			}
		div.slider.clock div.track
			{
			opacity:0.7;
			background:#DDD url(rotate.png) no-repeat;
			width:200px;
			height:200px;
			}
		div.slider.clock div.point 
			{
			border:1px solid black;
			position:absolute;
			top:0;
			left:0;
			}
		div.slider.clock div.point span
			{
			display:block;
			height:20px;
			width:20px;
			margin:-10px;
			background:black;
			opacity:0.1;
			}
	
	
		

		div.slider.bar
			{
			width:500px;
			background:#E0E0E0;
			margin:20px 0;
			height:30px;
			user-selection:none;
			}
		div.slider.bar div.pannel
			{
			margin:0 15px;
			display:block;
			height:30px;
			}
		div.slider.bar div.track
			{
			border:2px inset #F0F0F0;
			background:gray;
			position:relative;
			top:13px;
			margin:0;
			height:0;
			}
		div.slider.bar div.point 
			{
			position:relative;
			top:3px;
			width:1px;
			}
		div.slider.bar div.point span
			{
			display:block;
			background:transparent url(point.png) no-repeat;
			margin:0 0 0 -15px;
			width:30px;
			height:14px;
			}
			
		div.slider.bar div.point span:hover{background-position:0 -14px;}	
		div.slider.bar div.point span:active{background-position:0 -28px;}
		div.slider.bar div.point[disabled] span,div.slider div.point[disabled] span:hover,div.slider div.point[disabled] span:active{background-position:0 -42px;}			
				
				
				
		div.slider.field input{
			font-size:1em;
			font-weight:bold;
		}
		div.slider.field input.moving{
			cursor:n-resize;
		}		
	</style>
	<script type="text/javascript" src="slider.js"></script>
</head>

<body>
		<label>FontSize</label>
		<div class="slider bar" id="slider" tabindex="0" min="0" max="8" value="4" step="1" 
			onmousedown="Slider.init(this,event)">
			<div class="pannel">
				<div class="track"></div>
				<div class="point" style="left:50%;"><span></span></div>
				<input type="hidden" name="slider" value="4" />
			</div>
		</div>
		<hr />
		<div class="slider field">
			<input id="Slider" type="text" onchange="Slider.setPercentValue(this.value,$('Div1'),event);" value="0" size="30" />
		</div>
		<hr />
		<div class="slider clock" id="Div1" tabindex="0" min="0" max="10" value="5" step="1" 
			onmousedown="Slider.init(this,event)">
			<div class="pannel">
				<div class="track"></div>
				<div class="point" style="left:50%;"><span></span></div>
				<input type="hidden" name="slider" value="5" ID="Hidden1"/>
			</div>
		</div>
</body>
</html>